<template>
	<view class="u-flex-1">
		<u-input inputAlign="right" placeholder="请选择停车区域" v-model="label" type="select" @click="show=true" />
		<u-picker mode="selector" v-model="show" :default-selector="[0]" range-key="zoneName" :range="dpParkingZones"
			@confirm="confirm"></u-picker>
	</view>
</template>

<script setup>
	const zoneId = defineModel()
	const show = ref(false)
	const label = ref('')
	// const dpParkingZones = $store('user').dpParkingZones
	// const dpParkingZones = [
	// 	{zoneId: 1, zoneName: 'A区'},
	// 	{zoneId: 2, zoneName: 'B区'},
	// 	{zoneId: 3, zoneName: 'C区'},
	// 	]

	$store('user').getZoneList()

	const dpParkingZones = computed(() => {
		return $store('user').zoneList
	})

	const emit = defineEmits(['confirm'])

	function confirm(e) {
		label.value = dpParkingZones.value[e[0]].zoneName
		zoneId.value = dpParkingZones.value[e[0]].zoneId.toString()
		emit('confirm')
	}
</script>

<style>

</style>